<template>
  <div class="app-container">
    <!-- 面包屑导航 -->
    <div class="breadcrumb-container">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <a @click="goToCourse">课程</a>
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          <a @click="goToCourseDetail">{{ courseName || '课程详情' }}</a>
        </el-breadcrumb-item>
        <!-- <el-breadcrumb-item>
          <a @click="goToStage">{{ stageName || '阶段信息' }}</a>
        </el-breadcrumb-item> -->
        <el-breadcrumb-item>
          <span>{{stageName}}</span>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    
    <el-tabs v-model="activeTab" @tab-change="handleTabChange">
      <el-tab-pane label="案例信息" name="case">
        <case-component :stage-id="stageId" :stage-name="stageName" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router';
import CaseComponent from './index.vue';

const route = useRoute();
const router = useRouter();
const stageId = ref(route.query.stageId);
const stageName = ref(route.query.stageName);
const courseId = ref(route.query.courseId);
const courseName = ref(route.query.courseName);
const activeTab = ref('case');

function handleTabChange(tabName) {
  activeTab.value = tabName;
}

// 导航方法
function goToCourse() {
  router.push('/coursemanagement/course');
}

function goToCourseDetail() {
  router.push({
    path: '/coursemanagement/coursedetail',
    query: { id: courseId.value, courseName: courseName.value }
  });
}

function goToStage() {
  router.push({
    path: '/coursemanagement/stagedetail',
    query: { courseId: courseId.value, courseName: courseName.value }
  });
}
</script>

<style scoped>
.app-container {
  padding: 20px;
}

.breadcrumb-container {
  margin-bottom: 20px;
}

.breadcrumb-container a {
  color: #409EFF;
  cursor: pointer;
  text-decoration: none;
}

.breadcrumb-container a:hover {
  color: #66b1ff;
}
</style>